<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </a-card>
    </div>
    <a-card :bordered="false" class="mt-3 proCard">
      <div class="BasicForm">
        <a-form :labelCol="{ lg: 4, sm: 4 }" :model="formValue" ref="formRef" class="py-8">
          <a-form-item
            label="预约姓名"
            name="name"
            :rules="{ required: true, message: '请输入预约姓名' }"
          >
            <a-input v-model:value="formValue.name" placeholder="输入姓名" />
          </a-form-item>
          <a-form-item
            label="预约号码"
            name="mobile"
            :rules="{ required: true, message: '请输入预约号码' }"
          >
            <a-input placeholder="预约号码" v-model:value="formValue.mobile" />
          </a-form-item>

          <a-form-item
            label="病例图片"
            name="images"
            :rules="{ required: true, message: '请上传病例图片' }"
          >
            <BasicUpload
              :action="`${uploadUrl}/v1.0/files`"
              :headers="uploadHeaders"
              :data="{ type: 0 }"
              name="files"
              :width="100"
              :height="100"
              v-model:value="formValue.images"
              helpText="单个文件不超过2MB，最多只能上传10个文件"
            />
          </a-form-item>

          <a-form-item :wrapperCol="{ offset: 4 }">
            <a-space>
              <a-button type="primary" @click="formSubmit">提交预约</a-button>
              <a-button @click="resetForm">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { BasicUpload } from '@/components/Upload';
  import { useGlobSetting } from '@/hooks/setting';

  const globSetting = useGlobSetting();

  const formRef: any = ref(null);

  const { uploadUrl } = globSetting;

  const formValue = reactive({
    name: '',
    mobile: '',
    //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
    images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
  });

  const uploadHeaders = reactive({
    platform: 'miniPrograms',
    timestamp: new Date().getTime(),
    token: 'wUP2sov1RKfX6KMzgk3LpVtfPiphTcnbyZsaskIkQpM=',
  });

  function formSubmit() {
    formRef.value
      .validate()
      .then(() => {
        Message.success('验证成功');
      })
      .cache(() => {
        Message.error('验证失败，请填写完整信息');
      });
  }

  function resetForm() {
    formRef.value.restoreValidation();
  }
</script>

<style lang="less" scoped>
  .BasicForm {
    max-width: 550px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 20px;
  }
</style>
